<!--
 * @Description: 
 * @Author: Ronda
 * @Date: 2022-10-11 15:45:13
 * @LastEditors: Ronda
 * @LastEditTime: 2022-10-14 17:07:07
-->
<template>
  <div>
    <div id="topology"></div>
  </div>
</template>

<script>
import { Topology } from "@topology/core";
export default {
  data() {
    return {
      topology: null,
    };
  },
  computed: {},
  methods: {
    // 绘制线段及动画
    drawLine() {
      // 环境准备
      const pen = {
        id: 'myAniLine',
        locked: 1,
        lineWidth: 10,
        color: '#3D79B5',
        type: 1,
        name: 'line',
        anchors: [
          { x: 0, y: 0 },
          { x: 5, y: 0 },
        ],
        x: 320,
        y: 235,
        width: 100,
        height: 100,
      };
      // topology.addPen(pen);
      this.topology.addPens([pen]);
      // 清空高亮画笔
      this.topology.inactive();
      // topology.addPen(pen);
      // topology.addPen(pen, true);
      // 设置动画属性
      // 动画类型：默认 - 水流； 1 - 虚线段；2 - 圆点
      pen.lineAnimateType = 1;
      // 轨迹速度，默认1
      pen.animateSpan = 1;
      // 轨迹颜色
      pen.animateColor = 'yellow';
      // 虚线段，pen.lineAnimateType = 1  有效
      pen.animateLineDash = [20, 20];
      // 圆点大小，pen.lineAnimateType = 2 有效，最小值 6
      pen.animateDotSize = 20;
      // 反向播放
      pen.animateReverse = false;
      // 其他属性设置
      // pen.animateCycle = 3; // 动画播放3次。默认无限循环播放
      // 播放动画
      this.topology.startAnimate('myAniLine');
    },
    // 绘制图片到页面中
    drawImage() {
      // 显示图片
      const myImage = {
        name: "rectangle",
        x: 200,
        y: 200,
        width: 120,
        height: 70,
        // 引入public中的图片
        image: "/images/干燥机.png",
      }
      // 添加到画布中
      this.topology.addPens([myImage]);
      // 清空高亮画笔
      this.topology.inactive();
    },
    // 绘制图片到页面中
    drawImage2() {
      // 显示图片
      const myImage = {
        name: "rectangle",
        x: 820,
        y: 200,
        width: 120,
        height: 70,
        // 引入public中的图片
        image: "/images/电堆叠片.png",
      }
      // 添加到画布中
      this.topology.addPens([myImage]);
      // 清空高亮画笔
      this.topology.inactive();
    },
    // 绘制内容到画布中---供测试
    drawRect() {
      /* const pen = {
        name: 'rectangle',
        text: '矩形',
        x: 100,
        y: 100,
        width: 100,
        height: 100,
        color: 'blue',
      }; */
      // 画线段
      /* const pen = {
        lineWidth: 10,
        globalAlpha: 0.5,
        color: '#3D79B5',
        type: 1,
        // title: 'test',
        locked: 1,
        name: "line",
        lineName: "curve",
        anchors: [
          { x: 0.1, y: 0.1 },
          { x: 0.1, y: 0.5 },
          { x: 1, y: 1 },
        ],
        x: 300,
        y: 100,
        width: 100,
        height: 100,
      }; */
      // this.topology.addPen(pen);
      // 清空高亮画笔
      // this.topology.inactive();
      // 设置网格
      /* this.topology.setGrid({
        grid: true
      }); */

    },
    // 按钮
    drawButton() {
      const button = {
        name: "rectangle",
        x: 400,
        y: 100,
        locked: 1,
        width: 60,
        height: 30,
        borderRadius: 0.2,
        text: "关",
        background: "#1890ff",
        color: "#1890ff",
        textColor: "#ffffff",
        activeBackground: "#40a9ff", //选中
        activeColor: "#40a9ff",
        activeTextColor: "#ffffff",
        hoverBackground: "#40a9ff", //鼠标经过
        hoverColor: "#40a9ff",
        hoverTextColor: "#ffffff",
        onClick: (pen) => {
          // 暂停动画
          this.topology.pauseAnimate('myAniLine');
        }
      };
      const button2 = {
        name: "rectangle",
        x: 300,
        y: 100,
        locked: 1,
        width: 60,
        height: 30,
        borderRadius: 0.2,
        text: "开",
        background: "#1890ff",
        color: "#1890ff",
        textColor: "#ffffff",
        activeBackground: "#40a9ff", //选中
        activeColor: "#40a9ff",
        activeTextColor: "#ffffff",
        hoverBackground: "#40a9ff", //鼠标经过
        hoverColor: "#40a9ff",
        hoverTextColor: "#ffffff",
        onClick: (pen) => {
          // 开始动画
          this.topology.startAnimate('myAniLine');
        }
      };
      const button3 = {
        name: "rectangle",
        x: 500,
        y: 100,
        locked: 1,
        width: 60,
        height: 30,
        borderRadius: 0.2,
        text: "从右到左",
        background: "#1890ff",
        color: "#1890ff",
        textColor: "#ffffff",
        activeBackground: "#40a9ff", //选中
        activeColor: "#40a9ff",
        activeTextColor: "#ffffff",
        hoverBackground: "#40a9ff", //鼠标经过
        hoverColor: "#40a9ff",
        hoverTextColor: "#ffffff",
        onClick: (pen) => {
          // 查找id = pen.id的画笔，
          this.topology.setValue({
            id: 'myAniLine',
            animateReverse: true
          });
        }
      };
      const button4 = {
        name: "rectangle",
        x: 600,
        y: 100,
        locked: 1,
        width: 60,
        height: 30,
        borderRadius: 0.2,
        text: "从左到右",
        background: "#1890ff",
        color: "#1890ff",
        textColor: "#ffffff",
        activeBackground: "#40a9ff", //选中
        activeColor: "#40a9ff",
        activeTextColor: "#ffffff",
        hoverBackground: "#40a9ff", //鼠标经过
        hoverColor: "#40a9ff",
        hoverTextColor: "#ffffff",
        onClick: (pen) => {
          // 查找id = pen.id的画笔，
          this.topology.setValue({
            id: 'myAniLine',
            animateReverse: false
          });
        }
      };
      this.topology.addPens([button, button2, button3, button4]);
      this.topology.inactive();
    },
    // 数据显示
    drawData() {
      const button = {
        id: 'data1',
        name: "rectangle",
        x: 500,
        y: 180,
        locked: 1,
        width: 120,
        height: 30,
        borderRadius: 0.2,
        text: new Date().getTime(),
        // background: "#1890ff",
        // color: "#1890ff",
        // color: "transparent",
        textColor: "#ffffff",
        // activeBackground: "#40a9ff", //选中
        activeColor: "#40a9ff",
        // activeTextColor: "#ffffff",
        // hoverBackground: "#40a9ff", //鼠标经过
        // hoverColor: "#40a9ff",
        hoverTextColor: "#ffffff",
      };
      this.topology.addPens([button]);
      this.topology.inactive();
    },
    // 初始化
    init() {
      // 创建topology对象
      this.topology = new Topology("topology");
      // 设置标尺
      this.topology.setRule({
        rule: true
      });
    }
  },
  created() { },
  mounted() {
    // this.drawRect();
    this.init();
    this.drawImage();
    this.drawLine();
    this.drawImage2();
    this.drawButton();
    this.drawData();
    setInterval(() => {
      // 查找id = pen.id的画笔，
      this.topology.setValue({
        id: 'data1',
        text: new Date().getTime()
      });
    }, 1000)
  }
};
</script>
<style>
body {
  margin: 0;
}

#topology {
  width: 100%;
  height: 100vh;
  background-color: #001932;
  /* background-image: url(./assets/images/favicon.ico); */
}
</style>